<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 <div id='app'>
  <p>{{messages}}</p >
  <button v-on:click="res">反转字符串</button>
 </div>


<script type="text/javascript">
 new Vue({
  el:'#app',
  data:{
   messages: 'Runoob!'
  },
  methods:{
   res:()=>{
    this.messages=this.messages.split('').reverse().join('');
   }
  }
 })
</script>
</body>
</html>